<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 小鱼商城</title>
    <link rel="stylesheet" href="css/product.css">
</head>
<body>
    <header class="header">
        <!-- 同首页的头部 -->
    </header>

    <main class="product-container">
        <div class="breadcrumb">
            <a href="index.html">首页</a> > <span id="productName"></span>
        </div>

        <div class="product-detail">
            <div class="product-gallery">
                <div class="main-image">
                    <img id="productImage" src="" alt="">
                </div>
                <div class="thumbnail-list">
                    <!-- 缩略图将通过JavaScript动态加载 -->
                </div>
            </div>

            <div class="product-info">
                <h2 class="product-title" id="productTitle"></h2>
                <p class="product-subtitle" id="productDescription"></p>
                <div class="price-section">
                    <span class="current-price" id="productPrice"></span>
                </div>
                <div class="sales-info">
                    <!-- 销售信息将通过JavaScript动态加载 -->
                </div>
                <div class="product-options">
                    <!-- 商品选项将通过JavaScript动态加载 -->
                </div>
                <div class="quantity-control">
                    <button class="quantity-btn minus">-</button>
                    <input type="text" class="quantity-input" value="1">
                    <button class="quantity-btn plus">+</button>
                </div>
                <div class="action-buttons">
                    <button class="btn add-to-cart" id="addToCartBtn">加入购物车</button>
                    <button class="btn buy-now">立即购买</button>
                </div>
            </div>
        </div>

        <!-- 用户评价部分 -->
        <div class="reviews-section">
            <h2>用户评价</h2>
            <div class="review-summary">
                <div class="rating-overview">
                    <div class="average-rating">4.5</div>
                    <div class="stars">★★★★☆</div>
                    <div class="total-reviews">共 10 条评价</div>
                </div>
                <div class="rating-distribution">
                    <div class="rating-bar">
                        <span>5星</span>
                        <div class="bar">
                            <div class="fill" style="width: 80%;"></div>
                        </div>
                    </div>
                    <div class="rating-bar">
                        <span>4星</span>
                        <div class="bar">
                            <div class="fill" style="width: 10%;"></div>
                        </div>
                    </div>
                    <div class="rating-bar">
                        <span>3星</span>
                        <div class="bar">
                            <div class="fill" style="width: 5%;"></div>
                        </div>
                    </div>
                    <div class="rating-bar">
                        <span>2星</span>
                        <div class="bar">
                            <div class="fill" style="width: 3%;"></div>
                        </div>
                    </div>
                    <div class="rating-bar">
                        <span>1星</span>
                        <div class="bar">
                            <div class="fill" style="width: 2%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="review-list">
                <!-- 评价将通过JavaScript动态加载 -->
            </div>
            <button class="view-all-reviews">查看全部评价</button>
        </div>
    </main>

    <footer class="footer">
        <!-- 同首页的页脚 -->
    </footer>

    <script src="js/utils.js"></script>
    <script src="js/product-detail.js"></script>
</body>
</html>